<template>
  <div :style="{ ...styles.backgroundStyles }" class="position-full">
    <!-- 信号源 -->
    <div class="box">
      <p class="title" :style="{ ...styles.textStyles, ...textStyle('large') }">{{widget.UI.data.inputsName}}</p>
      <div class="flex-box" :style="gridStyle">
        <div class="box-item "
             :style="{...styles.widthStyles, ...styles.componentStyles, ...bgColorStyle(index,activeOutput)}"
             v-for="(item, index) in  widget.UI.data.inputs" :key="index">
          <p class="box-item-top flex-justify-start" :style="colorStyle(index)">
            <span :style="textStyle('small')" v-show="widget.UI.data.showTopLeftValue">{{item.controlValue}}</span>
          </p>
          <div class="flex-box height-100 width-100 justify-c">
            <div class="box-item-bot"
                 :style="colorStyle(index)">
              <pre :style="textStyle('small')">{{item.name}}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 显示设备 -->
    <div class="box">
      <p class="title" :style="{ ...styles.textStyles,...textStyle('large') }">{{widget.UI.data.outputsName}}</p>
      <div class="flex-box" :style="gridStyle">
        <div class="box-item"
             :style="{ ...styles.widthStyles, ...styles.componentStyles, ...bgColorStyle(index,activeInput)}"
             v-for="(item, index) in widget.UI.data.outputs" :key="index">
          <div class="flex-justify-end" :style="colorStyle(index)">
            <div class="box-item-top " :style="textStyle('small')" v-show="widget.UI.data.showTopLeftValue">
              {{item.controlValue}}</div>
            <p class="box-item-top text-align-right">
              <span :style="textStyle('small')"
                    v-if="widget.UI.data.showControlValue && widget.UI.data.showType==='name'">{{item.name}}</span>
              <span :style="textStyle('small')"
                    v-if="widget.UI.data.showControlValue && widget.UI.data.showType==='controlValue'">--</span>
            </p>
          </div>
          <div class="flex-box height-100 width-100 justify-c">
            <div class="box-item-bot"
                 :style="colorStyle(index)">
              <pre :style="textStyle('small')">{{item.name}}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapState} from 'vuex';
  import {formatColor, formatFontSize} from '@/utils';

  export default {
    name: 'VideoMatrix',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        formatColor: formatColor,
        formatFontSize: formatFontSize,
        activeInput: 0,
        activeOutput: 0
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {
          backgroundColor = '',
          componentColor = '',
          textColor = '',
          contentColor = '',
          itemSize = {}
        } = this.widget.UI.data
        const backgroundStyles = {};
        const componentStyles = {};
        const textStyles = {};
        const contentStyles = {};
        const widthStyles = {};
        backgroundColor && (backgroundStyles.backgroundColor = formatColor(backgroundColor, this.activeTheme));
        componentColor && (componentStyles.backgroundColor = formatColor(componentColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        contentColor && (contentStyles.color = formatColor(contentColor, this.activeTheme));
        itemSize && (widthStyles.width = itemSize.width + 'px');
        itemSize && (widthStyles.height = itemSize.height + 'px')
        return {
          backgroundStyles: backgroundStyles,
          componentStyles: componentStyles,
          textStyles: textStyles,
          contentStyles: contentStyles,
          widthStyles: widthStyles,
        };
      },
      colorStyle() {
        return (idx) => {
          const {textAntiColor, contentColor, textSize = 16} = this.widget.UI.data;
          return {
            'color': formatColor(this.activeInput === idx ? textAntiColor : contentColor, this.activeTheme),
            'fontSize': textSize + 'px'
          }
        };
      },
      bgColorStyle() {
        return (idx, active) => {
          const {activeColor, componentColor, itemSpace = '20', itemVSpace = '20'} = this.widget.UI.data;
          return {
            'backgroundColor': formatColor(active === idx ? activeColor : componentColor, this.activeTheme),
            // 'marginRight': itemSpace + 'px',
            // 'marginBottom':itemVSpace + 'px',
          }
        };
      },
      gridStyle() {
        const {itemSpace = '20', itemVSpace = '20', itemSize = {}} = this.widget.UI.data;
        return {
          gridRowGap: itemVSpace + 'px',
          gridColumnGap: itemSpace + 'px',
          gridTemplateColumns: `repeat(auto-fit, ${itemSize.width + 'px'})`,
        }
      },
      textStyle() {
        return (type) => {
          const {textSize = 16} = this.widget.UI.data;
          return {
            'fontSize': formatFontSize(type, textSize) + 'px',
          }
        };
      },
    },
  };
</script>
<style scoped lang="less">
  .position-full {
    background: #f5f5f5;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .box {
    width: 100%;
    height: 50%;
    overflow: auto;

  }

  .title {
    color: #333;
    font-weight: bold;
  }

  .justify-c {
    justify-content: center;
  }

  .flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-box {
    //display: flex;
    //align-items: center;
    ////gap: 20px;
    //flex-wrap: wrap;
    display: grid;
    grid-auto-flow: row;

    .box-item {
      border-radius: 15px;
      border: 1px solid transparent;

      .box-item-circle {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        color: #333;
      }

      .box-item-top {
        margin: 0;
        padding-right: 5px;
        height: 20px;
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        i {
          font-size: 24px;
        }
      }

      .box-item-bot {
        font-size: 14px;
        text-align: center;
      }
    }
  }
</style>

